<template>
  <ul class="menu">
    <li
      class="menu-item"
      :class="curActive === item.meta.key && 'menu-item-active'"
      :style="`padding-left: ${itemLeft}px`"
      v-for="item in options"
      :key="item.meta.key"
      @click="onClick(item)"
    >
      <el-icon
        v-if="item.meta.icon"
        :style="`font-size: ${SIZES[size].iconSize}`"
      >
        <component :is="item.meta.icon"></component>
      </el-icon>
      <span :style="`font-size: ${SIZES[size].fontSize}`">{{ item.name }}</span>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const SIZES = {
  default: {
    fontSize: '14px',
    iconSize: '16px'
  },
  small: {
    fontSize: '12px',
    iconSize: '14px'
  },
  large: {
    fontSize: '16px',
    iconSize: '18px'
  }
}

const {
  options = [],
  defaultActive,
  itemLeft = 28,
  size = 'default'
} = defineProps(['options', 'defaultActive', 'itemLeft', 'size'])

const emits = defineEmits(['select'])

const curActive = ref(defaultActive)

const onClick = menuItem => {
  curActive.value = menuItem.meta.key
  emits('select', menuItem)
}
</script>

<style scoped>
.menu {
  width: 100%;
  height: 100%;

  .menu-item {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 58px;
    transition: all 0.4s;

    &:hover {
      cursor: pointer;
      background-color: #f1f7fc;
      border-radius: 16px;
    }

    .el-icon {
      margin-right: 10px;
    }
  }

  .menu-item-active {
    color: var(--el-color-primary);
  }
}
</style>
